import { View, Image } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import { AtIcon } from 'taro-ui'
import { useState, useEffect } from 'react'

import '../index.scss'

const MyItemDetail = ({ recode: any }) => {
  const [items, setItems] = useState([
    {
      imageUrl:
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1Z9121605553448-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641787100&t=e6a397c733a84959c7b26d43de9ec58e',
      content: '详情描述章节',
    },
    {
      imageUrl:
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1Z9121605553448-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641787100&t=e6a397c733a84959c7b26d43de9ec58e',
      content: '详情描述章节',
    },
  ])
  return (
    <View className='item-box'>
      <View className='my-title'>详情</View>
      <View className='at-row h3-box'>
        <View className='at-col at-col-1'>
          <AtIcon value='message' size={15} color='#F00' />
        </View>
        <View className='at-col at-col-3 text'>商品介绍</View>
      </View>
      <View className='bottom-box-detail'>
        {items.map((item, index) => (
          <RemarkItem key={index} {...item} />
        ))}
      </View>
    </View>
  )
}

interface RemarkItemProps {
  imageUrl: string
  content: string
}

const RemarkItem = (props: RemarkItemProps) => {
  const { imageUrl, content } = props
  return (
    <View>
      <Image src={imageUrl} className='image' />
      <View className='content'>{content}</View>
    </View>
  )
}

export default MyItemDetail
